<template>
  <div class="member-audit">
    <el-row class="audit-btn">
      <el-col :span="24">
        <el-button type="primary" @click="auditAllClick">全部通过</el-button>
      </el-col>
    </el-row>
    <mescroll-vue class="audit-content" ref="mescroll" @init="mescrollInit" :down="mescrollDown" :up="mescrollUp">
      <div v-for="items in messageLists" :key="items.date">
        <p class="audit-title">{{ items.date }}</p>
          <ul class="audit-list">
            <li class="audit-item" v-for="item,key in items.list" :key="item.memberUserId">
              <div v-if="item.muState == 0">
                <p class="message-title">{{ item.muUsername }}申请加入？</p>
                <div style="float: right;" class="message-btn">
                  <el-button type="text" class="resolve" :data-time="item.createTime" @click="auditClick(item,1,key)" >同意</el-button>
                  <el-button type="text" class="refuse" :data-time="item.createTime" @click="auditClick(item,2,key)">拒绝</el-button>
                </div>
              </div>
              <div v-else-if="item.muState == 1">
                <p class="message-title">{{item.muUsername}}申请通过</p>
                <div style="float: right;color: #999">
                  已同意
                  <!-- <el-button type="text" class="refuse" :data-time="item.createTime" @click="auditClick(item,0,key)">重置</el-button> -->
                </div>
              </div>
              <div v-else>
                <p class="message-title">{{item.muUsername}}申请拒绝</p>
                <div style="float: right;color: #999">
                  已拒绝
                  <!-- <el-button type="text" class="refuse" :data-time="item.createTime" @click="auditClick(item,0,key)">重置</el-button> -->
                </div>
              </div>
            </li>
          </ul>
      </div>
    </mescroll-vue>
    </el-row>
  </div>
</template>

<script>
import { 
  getMemeberAll,
  updataAllAudit,
  updataAudit  
} from '@/api/auth-manage'
import { parseTime } from '@/utils/index'
import MescrollVue from 'mescroll.js/mescroll.vue'

export default {
  name: 'MemberList',
  data() {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        use: false
      },
      mescrollUp: {
        page: {
          num: 0,
          size: 20
        },
        callback: this.getMessageList,
        auto: true,
        htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>'
      },
      messageList: {},
      messageLists: [],
      page: 1,
      size: 5
    }
  },
  components: {
    MescrollVue
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    // 全部通过
    auditAllClick() {
      updataAllAudit().then(response => {
        this.$message({
          message: '已全部通过审核',
          type: 'success'
        })
        this.messageList = {}
        this.messageLists = []
        this.page = 1
        this.mescroll.resetUpScroll();
      })
    },
    // 获取消息列表
    getMessageList(page,mescroll) {
      let _this = this
      getMemeberAll({
        pageNo: page.num,
        pageSize: page.size
      }).then(response => {
        _this.formatData(response.data.datas)
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          mescroll.endSuccess(response.data.datas.length)
        })
      }).catch((e) => {
        // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        mescroll.endErr()
      })
    },
    // 格式化数据
    formatData(data) {
      let _this = this
      let object = _this.messageList
      data.forEach((item) => {
        let date = parseTime(item.createTime,'{y}-{m}-{d}')
        if(object[date]){
          object[date].list.push(item)
        }else{
          object[date] = {
            list: []
          }
          object[date].list.push(item)
        }
      })
      _this.messageList = object;
      this.setArr(object)
    },
    // 单个审核（同意拒绝）按钮
    auditClick(data,auditId,index) {
      let _this = this
      updataAudit({
        memberUserId: data.memberUserId,
        muState: auditId
      }).then(response => {
        this.$message('已审核')
        let date = parseTime(data.createTime,'{y}-{m}-{d}')
        _this.messageList[date].list[index].muState = auditId
        this.setArr(_this.messageList)
      })
    },
    setArr(object) {
      let arr = []
      let _this = this
      for(let key in object){
        arr.push({
          date: key,
          list: object[key].list // 指针指向同一地址 this.messageList   list
        })
      }
      _this.messageLists = arr
    }
  }
}
</script>

<style lang="scss" scoped>
.member-audit {
  padding: 30px;
  background-color: #fff;
  .audit-btn {
    padding: 0 0 43px 0;
    text-align: right;
    button {
      min-width: 100px;
      padding: 8px 14px;
      background-color: #015DFF;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 24px;
      color: #fff;
    }
  }
  .audit-content {
    max-height: calc(100vh - 420px);
    overflow-y: auto;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    .audit-title {
      padding: 0 0 5px 48px;
      margin: 0;
      font-weight: 500;
    }
    .audit-list {
      padding: 0 88px 50px 78px;
      .audit-item {
        padding: 0 22px 0 10px;
        font-size: 14px;
        border-bottom: 1px solid #e8e8e8;
        line-height: 55px;
        .message-title {
          display: inline-block;
          width: calc(100% - 130px);
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: top;
        }
        .message-btn{
          font-weight: 500;
          button{
            margin-left: 62px;
          }
          .resolve{
            margin: 0;
            color: #015DFF;
          }
          .refuse{
            color: #EB1B34;
          }
        }
      }
    }
  }
}
</style>
